<template>
	<view>
		<view class="container">
			<view class="banner">
				<u-swiper :list="info.photos" img-mode="heightFix" keyName="preview_url" :height="300"></u-swiper>
			</view>
			<view class="desc margin-top">
<!--				<view class="auth grid col-3 padding-xs text-center text-sm light themeColor">-->
<!--					<view>-->
<!--						<text class="cuIcon-profile padding-right-mn"></text> 实名认证-->
<!--					</view>-->
<!--					<view>-->
<!--						<text class="cuIcon-vipcard padding-right-mn"></text> 资格证书-->
<!--					</view>-->
<!--					<view>-->
<!--						<text class="cuIcon-refund padding-right-mn"></text> 爽约包赔-->
<!--					</view>-->
<!--				</view>-->
				<view class="desc-content bg-white padding radius-xl">
					<view class="top">
						<view class="name">
							<text class="text-xl text-bold text-black">{{info.nickname}}</text>
							<view class="cu-tag sm round margin-left" @click="addFans()">
								<text :class="['padding-right-mn text-red', isCollect ? 'cuIcon-likefill' : 'cuIcon-like']"></text> {{ info.staffCollects ? info.staffCollects.length : 0 }}
							</view>
						</view>
<!--						<view class="distance ">-->
<!--							<view class="cu-tag radius bg-green light">-->
<!--								<text class="text-sm">最早可约</text>-->
<!--								<text class="text-right text-orange text-bold padding-left-mn">{{ info.order_time || '暂无' }}</text>-->
<!--							</view>-->
<!--						</view>-->
					</view>
					<view class="center text-sm text-gray">
						<text>已服务{{info.sale_count }}单</text>
						<view class="">
							<text class="cuIcon-location padding-right-mn"></text>
							<text class="text-black">{{ info.juli }}</text>
						</view>
					</view>
					<view class="buttom text-sm text-gray">
						<text>{{ info.description }}</text>
					</view>
				</view>
			</view>
			<view class="navaction padding padding-bottom-0">
				<view class="bg-white radius-xl padding-top-lg">
					<view class="grid col-3 padding-sm text-center">
						<view :class="navTbale==index?'active':''" v-for="(item,index) in navList" :key="index" @click="changeNavTab(index)">
							{{item}}
						</view>
					</view>

					<view class="padding-top-0">
						<view class="project-list bg-white padding-sm radius-xl" v-if="navTbale==0">
							<view
								class="item radius-lg padding-tb"
								:class="projects.length - 1 != index ? 'solid-bottom' : ''"
								v-for="(item,index) in projects" :key="index">
								<image :src="item.image" class="img" v-if="item.photos"></image>
								<view class="probox">
									<view class="title text-bold text-black margin-bottom-xs">
										<text>{{item.name}}</text>
										<view class="text-sm text-right cost text-red">
											<text class="text-bold">¥</text>
											<text class="text-lg text-bold">{{item.label_price || item.price}}</text>
										</view>
									</view>
									<view class="text-cut text-gray margin-bottom-sm text-sm">{{item.description}}</view>
									<view class="price flex flex-wrap">
										<view class="time basis-sm text-sm">
											<text class="cuIcon-timefill text-lg themeColor"></text>
											<text class="padding-left-mn">{{item.duration}}分钟</text>
										</view>
										<view class="basis-lg text-right liji">
											<u-number-box
												button-size="20"
												v-model="item.num"
												min="0"
												style="float: right;">
											</u-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 阿姨介绍 -->
						<view class="shebase bg-white radius-xl" v-if="navTbale==1">
							<view class="cu-card dynamic no-card">
								<view class="margin-bottom">
									<view class="cu-item shadow"  style="padding: 30rpx">
<!--                    <u-parse :html="info.content"></u-parse>-->
                    {{ info.description }}
									</view>
								</view>
							</view>
						</view>

						<!-- 阿姨评价 -->
						<Comment :list="comment" :show="navTbale==2?true:false"/>
					</view>
				</view>
			</view>
		</view>

		<!-- 立即预约 -->
		<view class="cu-bar bg-white tabbar shop foot grid col-2">
			<view class="check padding-left">
				<template v-if="proCount > 0">
					已选<text class="text-red padding-lr-xs">{{proCount}}</text>项服务项目
				</template>
			</view>
			<view class="reservation text-right padding-right">
				<div class="bg-primary cu-btn round china-btn-bg" @click="goReserva()">立即预约</div>
			</view>
		</view>

		<Loading v-if="pageLoading"/>
	</view>
</template>

<script>
	import Comment from './modules/comment.vue'; // 验证码登录
	export default {
		components: {Comment},
		data() {
			return {
				pageLoading:false,
				navTbale:0,
				navList:['服务项目','阿姨介绍','用户评价'],
				info: {
          orderGoods: [],
        },
				projects: [],
				comment: [],
        userInfo: {}
			};
		},
		computed: {
		    proCount() {
		      return this.projects.filter(item => item.num > 0).length;
		    },
      isCollect() {
          return this.info.staffCollects && this.info.staffCollects.some(item => item.member_id === this.userInfo.id)
        }
		},
    onShow() {
      this.userInfo = uni.getStorageSync('userInfo') || {}
    },
		onLoad({ id }) {
		  this.getInfo(id);
		},
		methods:{
			getInfo(partnerId){
        let _this = this
        this.$http.getTechnicianDetail({
          id: partnerId
        }).then(res => {
          _this.info = {
            ...res,
            juli: '0km',
            photos: res.photos.split(',').map(item =>  item),
            sale_count: res.sale_count || res.orderGoods.length
          }
          wx.getLocation({
            type: 'wgs84',
            success: (_res) => {
              console.log(_res)
              _this.info.juli = _this.getDistance(_res.latitude, _res.longitude, res.latitude, res.longitude)
            },
            fail: (err) => {
            }
          })

        })
        // 获取当前用户关联的项目
        this.$http.getProjectList().then(res => {
          this.projects = res.map(item => {
            return {
              ...item,
              num: 0,
              photos: (item.photos || '').split(',').map(image =>  image)
            }
          })
        })
        this.$http.getTechnicianCommentList({
          staff_id: partnerId
        }).then(res => {
          this.comment = res
        })
			},

      Rad(d) { //根据经纬度判断距离
        return d * Math.PI / 180.0;
      },
      getDistance(lat1, lng1, lat2, lng2) {
        if (!lat1 || !lng1 || !lat2 || !lng2) {
          return '0m'
        }
        if (lat1 == lat2 && lng1 == lng2) {
          return "0m";
        }
        // lat1用户的纬度
        // lng1用户的经度
        // lat2阿姨的纬度
        // lng2阿姨的经度
        var radLat1 = this.Rad(lat1);
        var radLat2 = this.Rad(lat2);
        var a = radLat1 - radLat2;
        var b = this.Rad(lng1) - this.Rad(lng2);
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
        s = s * 6378.137;
        s = Math.round(s * 10000) / 10000;
        s = s.toFixed(2) + 'km' //保留两位小数
        console.log('经纬度计算的距离:' + s)
        return s
      },
			goReserva(){
				let self = this;
				let oldPro = this.projects,newArr = new Array();
				oldPro.forEach(function(item) {
					if(item.num > 0){
						newArr = newArr.concat({
							id:item.id,
							num:item.num
						})
					}
				})
				if(newArr.length == 0){
					uni.showToast({
						title:'请选择项目',icon:'none'
					})
					return;
				}
				this.toUrl('/pages/order/confirm?projects='+JSON.stringify(newArr)+'&partnerId='+self.info.id,true);
			},
			addFans(){
        if (!this.userInfo.id) {
         uni.showToast({
           title: '请先登录',
           icon: 'none'
         })
        } else {
          if (this.isCollect) {
            const findCollect = this.info.staffCollects.find(item => item.member_id === this.userInfo.id)
            this.$http.deleteStaffCollect(findCollect.id).then(res => {
              this.info.staffCollects = this.info.staffCollects.filter(item => item.member_id !== this.userInfo.id)
            })
          } else {
            this.$http.createStaffCollect({
              staff_id: this.info.id,
              member_id: this.userInfo.id
            }).then(res => {
              this.info.staffCollects.push(res)
            })
          }
        }
			},
			changeNavTab(index){
				this.navTbale = index;
			},
		}
	}
</script>

<style lang="less" scoped>
.container{
	padding-bottom: 120upx;
	.banner{
		border-bottom-left-radius: 55upx;
		border-bottom-right-radius: 55upx;
		overflow: hidden;
	}
	.navaction{
		.active{
			color: black;
			font-weight: bold;
		}
	}
	.desc{

		.auth{
			border-top-left-radius: 15upx;
			border-top-right-radius: 15upx;
			width: 85%;
			margin: auto;
		}

		.desc-content{
			width: 93%;
			margin: auto;
			line-height: 45upx;
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}
			.center{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
}
.project-list{
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		height: 190upx;
		.img{
			width: 140upx;
			height: 140upx;
			border-radius: 10upx;
      flex-shrink: 0;
		}
		.probox{
			width: 70%;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				.cost{
					width: 125upx;
				}
			}
		}
	}
}
.shebase{
	.zan-bottom{
		display: flex;
		justify-content: space-between;
	}
}

.reservation{

}
</style>
